<!doctype html>
<!--
    Copyright 2018 Google Inc. All Rights Reserved.
    Licensed under the Apache License, Version 2.0 
    (the "License"); you may not use this file 
    except in compliance with the License.
    You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
    Unless required by applicable law or agreed to 
    in writing, software distributed under the License
    is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
    either express or implied.
    See the License for the specific language governing
    permissions and limitations under the License.
    Licensed under the Apache License, 
    Version 2.0 (the "License");
-->
<html>

<head>
    <title>Simple Slider Custom Property Variable Font</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div id="formcontainer">
        <div class="form-row">
            <label for="slider">Font Weight:</label>
            <input type="range" class="slider" id="wght" min="100" max="700" step="1" value="100">
            <input type="text" class="textbox" value="100">
        </div>
        <div class="form-row">
            <label for="slider-width">Font Width:</label>
            <input type="range" class="slider" id="wdth" min="10" max="100" step="1" value="0">
            <input type="text" class="textbox" value="0">
        </div>
    </div>

    <div id="textcontainer">
    	<p>Font:</p>
	    <p id="font-gingham" class="clickable selected">
	       Gingham
	    </p>
	    <p id="font-decorvar" class="clickable unselected">
	        some more text
   	 </p>
	</div>
    

    <script src="script.js"></script>
</body>

</html>